import React, { useEffect, useState } from "react";
import MySetting from "@/layouts/components/MySetting";
import robert from "@/assets/images/robert.png";
import setting_off from "@/assets/images/setting_off.png";
import setting_on from "@/assets/images/setting_on.png";
import add_off from "@/assets/images/add_off.png";
import add_on from "@/assets/images/add_on.png";
import message_off from "@/assets/images/message_off.png";
import message_on from "@/assets/images/message_on.png";
import "./index.less";
const Robert: React.FC = () => {
  useEffect(() => {}, []);
  const [activeInfo, setActiveInfo] = useState<{ index: number; type: string }>({ index: -1, type: "" });
  const [isShow, setIsShow] = useState(false);
  const [mySettingIsShow, setMySettingIsShow] = useState(false);
  function handleIcon(index: number, type: string) {
    setActiveInfo({ index, type });
    if (index === 0) {
      setMySettingIsShow(true);
    } else {
      setMySettingIsShow(false);
    }
  }
  function handleRobert(isShow: boolean) {
    setIsShow(isShow);
  }
  return (
    <div>
      {isShow ? (
        <div className="all-bar">
          <div
            className="icon-normal icon-settings"
            onClick={() => {
              handleIcon(0, "setting");
            }}
          >
            <img src={activeInfo.type === "setting" ? setting_on : setting_off} />
          </div>
          <div
            className="icon-normal icon-add"
            onClick={() => {
              handleIcon(1, "add");
            }}
          >
            <img src={activeInfo.type === "add" ? add_on : add_off} />
          </div>
          <div
            className="icon-normal icon-message"
            onClick={() => {
              handleIcon(2, "message");
            }}
          >
            <img src={activeInfo.type === "message" ? message_on : message_off} />
          </div>
        </div>
      ) : (
        ""
      )}

      <div
        className="settings"
        onClick={() => {
          handleRobert(!isShow);
        }}
      >
        <div className="robert">
          <img src={robert} className="robert-img" alt="" />
        </div>
      </div>
      {mySettingIsShow ? <MySetting /> : ""}
    </div>
  );
};

export default Robert;
